$(document).ready(function(){
	$("#headerViewContainer").click(function(){
		$("#headerUpdateInput").trigger("click");
		// 防止误点多次，
		preventMultipleClicks($("#headerUpdateInput"));
	});
});

/**
 * 防止多次点击，设置为控件不可用，一段时间后才可用
 * @param {Object} obj
 */
function preventMultipleClicks(obj) {
	obj.attr("disabled", true);
  //过1秒后执行倒计时函数
  setTimeout(function() {
	obj.removeAttr("disabled");
	// 设置按钮可用
	$('#saveBtn').attr('href', "javascript:saveHeader();").parent().removeClass("gray-color").addClass("red-yellow-color");
  },1000)
}

/** 以下处理图片裁剪 */
var initCropper = function (img, input){
    var $image = img;
    
    var options = {
        aspectRatio: 1, // 纵横比
        viewMode: 2,
        minContainerHeight: 200,
        preview: '#headerViewContainer' // 预览图的class名
    };
    $image.cropper(options);
    var $inputImage = input;
    var uploadedImageURL;
    if (URL) {
        // 给input添加监听
        $inputImage.change(function () {
            var files = this.files;
            var file;
            if (!$image.data('cropper')) {
                return;
            }
            if (files && files.length) {
                file = files[0];
                // 判断是否是图像文件
                if (/^image\/\w+$/.test(file.type)) {
                    // 如果URL已存在就先释放
                    if (uploadedImageURL) {
                        URL.revokeObjectURL(uploadedImageURL);
                    }
                    uploadedImageURL = URL.createObjectURL(file);
                    // 销毁cropper后更改src属性再重新创建cropper
                    $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                    $inputImage.val('');
                } else {
                  window.alert('请选择一个图像文件！');
              }
          }
      });
    }
}
/**
 * 保存头像，裁剪+后台保存
 */
function saveHeader(){
    var $image = $('#headerImg');
    var $target = $('#headerShowRs');
    $image.cropper('getCroppedCanvas',{
        width:150, // 裁剪后的长宽
        height:150
    }).toBlob(function(blob){
        // 裁剪后将图片放到指定标签
        $target.attr('src', URL.createObjectURL(blob));
    });
    // TODO 后台保存
}
$(function(){
    initCropper($('#headerImg'),$('#headerUpdateInput'));
});
